<!--
 * @Description: 鑫复来404页面
 * @Author: Kerwin
 * @Date: 2025-10-15 10:43:42
 * @LastEditTime: 2025-10-15 10:57:56
 * @LastEditors:  Please set LastEditors
-->

<template>
  <view class="no-page-container">
    <!-- 图标区域 -->
    <view class="icon-box">
      <image
        :src="imageUrl || iconUrl"
        mode="aspectFit"
        class="icon-img"
      ></image>
    </view>

    <!-- 文字说明 -->
    <view class="text-box">
      <text class="title">{{ title || '开发中，尽情期待～' }}</text>
    </view>

    <!-- 操作按钮区域 -->
    <view class="btn-box" v-if="showButton">
      <!-- 自定义按钮 -->
      <u-button
        v-if="customButton"
        :type="buttonType || 'primary'"
        @click="handleButtonClick"
        style="width: 200rpx; margin: 20rpx 0"
      >
        {{ buttonText || '返回首页' }}
      </u-button>

      <!-- 默认按钮（当没有自定义按钮时显示） -->
      <u-button
        v-else
        type="primary"
        @click="goHome"
        style="width: 200rpx; margin: 20rpx 0"
      >
        返回首页
      </u-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue'
import kf from '@/static/xfl/kf2.png'
// 组件属性定义
interface Props {
  imageUrl?: string // 自定义图片地址
  title?: string // 自定义标题文字
  showButton?: boolean // 是否显示按钮，默认显示
  customButton?: boolean // 是否显示自定义按钮
  buttonText?: string // 自定义按钮文字
  buttonType?: 'primary' | 'default' | 'error' | 'success' // 按钮类型
  onClick?: () => void // 按钮点击事件
}

const props = withDefaults(defineProps<Props>(), {
  showButton: true // 默认显示按钮
})

// 默认图片路径
const iconUrl = ref(kf)

// 跳转首页
const goHome = () => {
  uni.switchTab({
    url: '/pages/index/index'
  })
}

// 处理按钮点击事件
const handleButtonClick = () => {
  if (props.onClick) {
    props.onClick()
  } else {
    goHome()
  }
}
</script>

<style scoped lang="scss">
.no-page-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f8f9fa;
  padding: 0 20rpx;

  .icon-box {
    width: 345.93rpx;
    height: 266rpx;
    margin-bottom: 60rpx;

    .icon-img {
      width: 100%;
      height: 100%;
      border-radius: 10rpx;
    }
  }

  .text-box {
    text-align: center;
    margin-bottom: 60rpx;

    .title {
      font-size: 32rpx;
      color: #8d8d8d;
    }
  }

  .btn-box {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
  }
}
</style>
